window.onload = function(){
    /*去执行我们需要执行的代码*/
    search ();
    banner ();
    downTime ();
};
/*搜索栏js效果*/
function search (){
    
    /*
     * 1.当我们滑动页面的时候   不超过轮播图的高度的时候  颜色需要爱随着高度区去改变的
     * 2.当我们超过的时候  是不需需要去改变的
     * */


    /*搜索栏*/
    var search = document.querySelector('.jd_header_box');
    /*banner*/
    var banner = document.querySelector('.jd_banner');
    /*获取高度限制*/
    var height = banner.offsetHeight;


    /*透明度*/
    var opacity = 0;

    window.onscroll = function(){
        /*IE document.documentElement.scrollTop*/
        //console.log(document.body.scrollTop);
        var distTop = 0;
        if(document.documentElement){
            distTop=document.documentElement.scrollTop;
        }
        distTop=document.body.scrollTop;
         console.log(distTop)
        /*超过的时候  */
        if(distTop > height){
            opacity = 0.85;
        }
        /*不超过的时候*/
        else{
            opacity = 0.85 * (distTop/height);

        }

        /*操作dom*/
        search.style.background = "rgba(201,21,35,"+opacity+")";


    }
}
/*轮播图*/

function banner () {
    
    // 获取一些dom 元素  
    var banner = document.querySelector(".jd_banner");
    var imgBox =document.querySelector(".jd_banner ul:first-child");
    var points =document.querySelectorAll(".jd_banner ul:last-child li");
  
    // 获取装载轮播图的盒子的宽度  也就是每一个轮播图的宽度
    var width = banner.offsetWidth;
    // 定义索引值
    var index = 0;
    // 定义定时器
    var timer = null;

    /*公共的方法*/
    //添加过渡属性
    var addTransition = function (){
        imgBox.style.webkitTransition="all .5s";
        imgBox.style.transition="all .5s";
    }
     //删除过渡
    var removeTransition = function (){
        imgBox.style.webkitTransition="none";
        imgBox.style.transition="none";
    }
    // 设置图片盒子的位置
    var setTranslateX = function(translate){
        imgBox.style.webkitTransform ="translateX("+translate+"px)";
        imgBox.style.transform ="translateX("+translate+"px)";
       
    }
    // 小圆点的背景色
    var setPoints =function (){
        for(var i = 0 ; i<points.length; i++){
            points[i].className="";
        }
          points[index-1].className="now";
    }

    //通过定时器 每隔一秒钟改变 index 
    timer = setInterval(function(){

        // 每隔一秒钟 + 1 
        index ++ ;

        if(index>5){
            index=1;
        }
        
        // 调用方法
        addTransition();
        setTranslateX(-index*width);
        setPoints();
    },1000);

    /*

        触摸事件 
         touchstart
         touchmove 
         touchend  
        监听过渡结束事件 
         transitionend

        addEventListener(参数1：事件， 参数2：函数);

    */
        // 监听过渡结束事件 
    imgBox.addEventListener("transitionend",function(){

        // console.log("transitionend")

        if(index>=6){
            index=1;
        }else if(index<=0){
            index=5;
        }
        setPoints();
        // console.log(index)
    });

    // 记录一个开始x轴坐标
    var startX=0;
    // 记录滑动结束的x轴坐标
    var endX=0;
    // 定义标记 判断手指是否滑动
    var isMove=false;
    // 定义滑动的距离
    var distance=0;


    imgBox.addEventListener('touchstart',function(e){
        // 当手指按下  清除定时器
        clearInterval(timer);
        // 事件对象
        // console.log(e)
        startX=e.touches[0].clientX;
    });
    imgBox.addEventListener('touchmove',function(e){

        // 已经滑动 isMove 设置true 
        isMove = true;
        // x轴坐标结束信息
        endX=e.touches[0].clientX;

        // 滑动的距离 = 结束坐标 - 开始坐标
        distance=endX - startX;

        // 定义将改变的位置 = 当前的位置 + 滑动的距离
        var translate = -index*width+distance;

        // 删除过渡
        removeTransition();
        // 设置轮图盒子的位置
        setTranslateX(translate);

    });
    imgBox.addEventListener('touchend',function(e){
            
            // 往左边滑动 distance是负数  index ++
            // 往右边滑动 distance是正数  index --
            // 获取绝对值方法 Math.abs

            // 超过盒子的三分之一 下一张或上一张
            if(Math.abs(distance)>(width/3) && isMove==true){

                    if(distance>0){
                        index--;
                    }else {
                        index++;
                    }

                    addTransition();
                    setTranslateX(-index*width);
            }else {
                // 吸附回原来位置
                addTransition();
                setTranslateX(-index*width);

            }



             //通过定时器 每隔一秒钟改变 index 
            timer = setInterval(function(){

                // 每隔一秒钟 + 1 
                index ++ ;

                if(index>5){
                    index=1;
                }
                
                // 调用方法
                addTransition();
                setTranslateX(-index*width);
                setPoints();
            },1000);


            // 恢复初始化数据
            startX=0;
            endX =0;
            isMove = false;
            distance=0;

        
    });
}

/*倒计时*/
function downTime () {

    // 获取相应的dom 元素 
    // 装时间的盒子
    var timeBox = document.querySelector(".sk_time ");
    var boxs = timeBox.querySelectorAll("span");

    console.log(boxs)
     /*
    * 1.需要倒计时的时间  自己可以定义 小时 分钟 秒钟
    * 2.倒计时    定时器
    * 3.把时间渲染到6个盒子当中
    * */

    var time =  2 * 60 * 60 ; // 定义倒计时的时间 7200秒 

    var tt = null ;  //定时器

    tt = null;
    // 定时器函数 setInterval(函数 ，相隔时间值)   ；1000毫秒 = 1秒
    tt = setInterval(function(){

        time --;
 
        var h = 0;  //定义小时变量
        var m = 0;  //定义分钟变量
        var s =0;   //定义秒钟变量、


        h =Math.floor(time/3600);       //计算小时数
        m =Math.floor((time/60)%60);    //计算分钟数
        s = time%60;                    //计算秒钟

        // console.log("剩余的小时："+h+"-剩余的分钟："+m+"-剩余的秒钟："+s)
        // %  取余 

        boxs[0].innerHTML=Math.floor(h/10);
        boxs[1].innerHTML=h%10;

        boxs[3].innerHTML=Math.floor(m/10);
        boxs[4].innerHTML=m%10;

        boxs[6].innerHTML=Math.floor(s/10);
        boxs[7].innerHTML=s%10;
    
    },1000)
}

